<!DOCTYPE html>
<html lang="en">
	<head>
		<title>三维锚点</title>
		<meta name="viewport" content="user-scalable=no, width=device-width" />
		<link rel="stylesheet" href="./lib/elementui/index.css" />
		<link rel="stylesheet" href="./style/common.css" />
		<style>
			#symbolList {
				height: 150px;
				width: 250px !important;
				overflow: auto;
				user-select: none;
				overflow-x: hidden;
			}
			.custom-tree-node {
				display: flex;
				align-items: center;
			}
			.symbol-label {
				display: inline-block;
				width: 160px;
				overflow: hidden;
			}
			.remove-text-button {
				width: 50px !important;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<div id="container"></div>
			<el-form id="operatePanel" class="mg-panel" label-width="80px">
				<el-form-item label="锚点列表">
					<el-tree :data="marks" :props="defaultProps" id="symbolList">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<div class="symbol-label">{{ node.label }}</div>
							<span>
								<el-button
									type="text"
									size="mini"
									@click="() => remove(node, data)"
									class="remove-text-button">
									删除
								</el-button>
							</span>
						</span>
					</el-tree>
				</el-form-item>
				<el-form-item label="">
					<el-button type="success" @click="draw">创建锚点</el-button>
				</el-form-item>
				<el-form-item label="">
					<el-button type="danger" @click="clear">清空锚点</el-button>
				</el-form-item>
			</el-form>
		</div>
		<script src="./lib/vue.js"></script>
		<script src="./lib/elementui/index.js"></script>
		<script src="/monge/Monge.js"></script>
		<script>
			let viewer3d, markTool, markManagerTool;
			new Vue({
				el: "#app",
				data() {
					return {
						defaultProps: {
							label: "label",
						},
						marks: [],
					};
				},
				async mounted() {
					Monge.EngineResources = "/EngineResources/";

					viewer3d = new Monge.Viewer3D("container", {
						effect: Monge.EffectType3D.Render | Monge.EffectType3D.Sky,
					});

					window.addEventListener("resize", () => {
						viewer3d.reSize();
					});

					markTool = new Monge.Mark3D(viewer3d);
					markManagerTool = new Monge.MarkManager3D(viewer3d);

					await viewer3d.load(["./models/bimex/C3/"]);
				},

				methods: {
					draw() {
						markTool.active({
							color: 0xff0000,
							callback: (type, data) => {
								if (Monge.CallbackType.DONE === type) {
									this.marks.push({
										id: data.id,
										label: `锚点${data.id}`,
									});
								}
							},
						});
					},
					remove(node, data) {
						const index = this.marks.findIndex((mark) => mark.id === data.id);

						if (index > -1) {
							markManagerTool.remove(this.marks[index].id);
							this.marks.splice(index, 1);
						}
					},
					clear() {
						this.marks = [];
						markManagerTool.clear();
					},
				},
			});
		</script>
	</body>
</html>
